// 样式化组件

import styled from "@emotion/styled"

const Button = styled.button`
width: 100px;
height: 40px;
background: skyblue;
`

const Div = styled.div({
  width: 500,
  height: 100,
  background: 'pink',
  margin: '0 auto'
})

// 样式化组件默认样式的覆盖方式
const Container = styled.div`
width: 300px;
height: 300px;
background: ${props => props.bgColor || 'skyblue'}
`

const Content = styled.div({
  width: 200,
  height: 200,  
  background: 'red'
}, props => ({
  width: props.w,
  height: props.h,
  background: props.bc
}))

function App() {
  return <Div>
    <Button>按钮</Button>
    <Container bgColor="blue"></Container>
    <Content w={80} bc="tomato">对象形式的样式覆盖</Content>
  </Div>
}

export default App